<!DOCTYPE html>
<html lang="fr">
	
<!-- Mirrored from www.kyrielles.net/sliderkit/demos/news-sliders.html by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 11 Feb 2012 18:55:08 GMT -->
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Slider Kit > News sliders</title>
		<meta name="Keywords" content="slider, kit, slideshow, gallery, carousel, jquery plugin" />
		<meta name="Description" content="Slider Kit jQuery slideshow plugin: news sliders examples" />
		
		<!-- jQuery library -->
		<script type="text/javascript" src="../lib/js/external/_oldies/jquery-1.3.min.js"></script>
		<!--<script type="text/javascript" src="../lib/js/external/jquery-1.6.2.min.js"></script>-->
		
		<!-- jQuery Plugin scripts -->
		<script type="text/javascript" src="../lib/js/external/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="../lib/js/external/jquery.mousewheel.min.js"></script>
		
		<!-- Slider Kit scripts -->
		<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.1.pack.js"></script>

		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility				
	
				// News slider > Vertical
				$(".newslider-vertical").sliderkit({
					shownavitems:3,
					verticalnav:true,
					navitemshover:true,
					circular:true
				});
				
				// News slider > Horizontal
				$(".newslider-horizontal").sliderkit({
					auto:false,
					shownavitems:5,
					panelfx:"sliding",
					panelfxspeed:1000,
					panelfxeasing:"easeInOutExpo", //"easeOutExpo", "easeOutCirc", etc.
					mousewheel:true,
					keyboard:true,
					fastchange:false
				});
				
				// News slider > Minimal
				$(".newslider-minimal").sliderkit({
					auto:true,
					circular:true,
					shownavitems:1,
					panelfx:"sliding",
					panelfxspeed:400,
					panelfxeasing:"easeOutCirc",
					mousewheel:false,
					verticalnav:true,
					verticalslide:true
				});
	
			});	
		</script>
		
		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
		
		<!-- Slider Kit compatibility -->	
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
		<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->

		<!-- Site styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
		
	</head>
	<body>
		<div id="header">
			<div id="header-wrapper">
				<div id="header-title"><a href="http://www.kyrielles.net/sliderkit/sliderkit_en.html" title="SliderKit Homepage">Slider Kit, sliding contents with jQuery.</a></div>
				<div class="spacer"></div>
			</div>
		</div>
		<div id="page" >
			<div id="content">
				<h1 class="code-first">News sliders</h1>
				
				<noscript><div class="noscript"><span class="code-sitename">Slider Kit</span> jQuery plugin requires Javascript activation.</div></noscript>

				<h2>Vertical news slider</h2>
				<p>A very classic news slider. The design is basic. Feel free to improve it!</p>
				<p><strong>Features: </strong>auto, circular, thumbnails mouseover (<span class="code-setting">navitemshover</span> option is set to <span class="code-value">true</span>).</p>

				<!-- Start newslider-vertical -->
				<div class="sliderkit newslider-vertical">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li><a href="http://www.google.com/" title="[link title]">Lorem ipsum dolor</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum dolor est</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum</a></li>
							</ul>
						</div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-03.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...</p>
								<a class="sliderkit-news-readmore" href="#">Read more</a>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-07.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor est</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
								<a class="sliderkit-news-readmore" href="#">Read more</a>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-01.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...</p>
								<a class="sliderkit-news-readmore" href="#">Read more</a>
							</div>
						</div>
					</div>
				</div>
				<!-- // end of newslider-vertical -->
				
				<h2>Horizontal news slider</h2>
				<p>Another way to use the carousel with text content.</p>
				<p><strong>Features: </strong>mousewheel/keyboard navigation.</p>

				<!-- Start newslider-horizontal -->
				<div class="sliderkit newslider-horizontal">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li><a href="#" title="[link title]">Lorem ipsum dolor</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum dolor est</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum dolor est</a></li>
								<li><a href="#" title="[link title]">Lorem ipsum dolor</a></li>
							</ul>
						</div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-06.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
								<a class="sliderkit-news-readmore" href="#">Read more</a></p>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-04.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor est</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
								<a class="sliderkit-news-readmore" href="#">Read more</a></p>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-01.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
								<a class="sliderkit-news-readmore" href="#">Read more</a></p>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-03.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor est</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
								<a class="sliderkit-news-readmore" href="#">Read more</a></p>
							</div>
						</div>
						<div class="sliderkit-panel">
							<div class="sliderkit-news">
								<a href="#" title="[Titre de l'article]"><img src="../lib/images/photos/small/sample-07.jpg" alt="[alternative text]" /></a>
								<h3><a href="#">Lorem ipsum dolor</a></h3>
								<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
								<a class="sliderkit-news-readmore" href="#">Read more</a></p>
							</div>
						</div>
					</div>
				</div>
				<!-- // end of newslider-horizontal -->
				
				
				<h2>Minimal news slider</h2>

				<!-- Start newslider-minimal -->
				<div class="sliderkit newslider-minimal">						
					<div class="sliderkit-legend">Latest news:</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<a href="#" title="[link title]">Is simply dummy text of the printing and typesetting industry...</a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[link title]">Is simply dummy text of the printing and typesetting industry...</a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[link title]">Is simply dummy text of the printing and typesetting industry...</a>
						</div>
					</div>
				</div>				
				<!-- // end of newslider-minimal -->

				</div>
			<div class="spacer"></div>
		</div>
	</body>

<!-- Mirrored from www.kyrielles.net/sliderkit/demos/news-sliders.html by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 11 Feb 2012 18:55:16 GMT -->
</html>